<script setup lang="ts">
const style = computed(() => {
  const val: any = {}
  // #ifdef APP-NVUE || MP-TOUTIAO || MP-LARK
  // nvue下，高度使用js计算填充
  val.height = `${uni.getSystemInfoSync().safeAreaInsets?.bottom}px`
  // #endif
  return val
})
const isNvue = ref(false)
onMounted(() => {
  // #ifdef APP-NVUE
  // 标识为是否nvue
  isNvue.value = true
  // #endif
})
</script>

<template>
  <view class="uv-safe-bottom" :style="[style]" :class="[!isNvue && 'uv-safe-area-inset-bottom']" />
</template>

<style scoped lang="scss">
.uv-safe-bottom {
  /* #ifndef APP-NVUE */
  width: 100%;
  /* #endif */
}
/* #ifndef APP-NVUE */
// 历遍生成4个方向的底部安全区
@each $d in top, right, bottom, left {
  .uv-safe-area-inset-#{$d} {
    padding-#{$d}: 0;
    padding-#{$d}: constant(safe-area-inset-#{$d});
    padding-#{$d}: env(safe-area-inset-#{$d});
  }
}
/* #endif */
</style>
